<template>
  <div class="list-item border-bottom">
    <div class="lottery-info">
      <span class="date-no">
        {{item.dateNo}}期
      </span>
      <span class="time">
        {{formatDate(item.drawTime)}}<span class="current" v-show="currentDateNo == item.dateNo">当前期</span>
      </span>
    </div>
    <div class="numbers">
      <span class="number" :class="currentDateNo == item.dateNo ? 'active' : '' " v-for="(number, index) in numbers" :key="index">
        {{number}}
      </span>
    </div>
  </div>
</template>

<script>
import { formatDateHMS } from '@/assets/js/util.js'
export default {
  props: {
    item: {
      type: Object,
      default: function() {
        return {
          id: 1,
          dateNo: '18120659',
          numbers: '3,8,0,2,8',
          drawTime: new Date().getTime() 
        }
      }
    },
    currentDateNo: {
      type: String,
      default: '18120659'
    }
  },
  methods: {
    formatDate(time) {
      return formatDateHMS(time)
    }
  },
  computed: {
    numbers() {
      return this.item.numbers.split(',')
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  .list-item 
    display flex
    align-items center
    justify-content space-between 
    height 48px
    .lottery-info 
      display flex 
      flex-direction column
      padding 10px 0
      .date-no 
        margin-bottom 3px
      .time 
        color $color-sub-grey
        font-size 12px 
        .current 
          padding-left 5px
          color $color-theme-red 
    .numbers 
      display flex
      .number 
        display flex 
        align-items center
        justify-content center
        width 26px 
        height 26px 
        border-radius 50% 
        border 1px solid $color-theme-red 
        color $color-theme-red 
        margin-right 9px
        &:last-child 
          margin-right 0
        &.active 
          background $color-theme-red
          color #fff
</style>